<template>
  <div class="app-item hover-shadow a" v-for="item in appList" :key="item.id">
    <el-button
      class="status-btn"
      size="small"
      type="primary"
      v-if="item.statusStr"
    >
      {{ item.statusStr }}
    </el-button>
    <el-image class="img" :src="item.image" fit="contain"></el-image>
    <div class="text-wrap">
      <div class="flex-yc flex-xbt">
        <h3 class="ovf1">{{ item.title }}</h3>
        <div class="flex-yc status">
          <!--          <i class="circle-icon el-icon&#45;&#45;left primary"></i>-->
          <!--          <span style="flex-shrink: 0">{{ item.statusStr }}</span>-->
          <!-- <el-button
            type="primary"
            link
            @click="
              $router.push({
                path: '/application/create',
                query: { appId: item.id, handlerType: 'read' },
              })
            "
          >
            查看
          </el-button> -->
        </div>
      </div>
      <span>{{ item.titleEn }}</span>
      <p>
        <el-text line-clamp="2">
          {{ item.description }}
        </el-text>
      </p>
    </div>
    <ul class="flex-yc flex-xbt">
      <li
        @click="
          $router.push({
            path: '/application/create',
            query: { appId: item.id, handlerType: 'edit' },
          })
        "
        title="编辑应用"
      >
        <i class="iconfont icon-detail"></i>
      </li>
      <li
        @click="
          $router.push({
            path: '/application/develop',
            query: { appId: item.id, title: item.title, handlerType: 'edit' },
          })
        "
      >
        <i class="iconfont icon-sheji" title="应用设计"></i>
      </li>
      <li
        @click="
          $router.push({
            path: '/application/cloud',
            query: { appId: item.id, title: item.title, handlerType: 'edit' },
          })
        "
      >
        <i class="iconfont icon-houtai" title="应用后台"></i>
      </li>
      <li @click="onAppDebugger(item.id, item.title)">
        <i class="iconfont icon-tiaoshi" title="应用调试"></i>
      </li>
      <li @click="onAppPutSubmit(item.id)" title="发布/下架">
        <i class="iconfont icon-fabu"></i>
      </li>
      <!-- <li @click="onAppExecSubmit(item.id)">
        <i class="iconfont icon-zanting" title="暂停"></i>
      </li> -->
      <li @click="onAppDel(item.id)" title="删除应用">
        <i class="iconfont icon-shanchu"></i>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {
  reqApplicationRun,
  reqAppPut,
  reqDeleteApp,
  reqgetAppTaskList,
  reqPreApplicationRun,
} from '@/pages/member/api/application'
import {
  queryAppParams,
  respAppData,
} from '@/pages/member/api/types/application'

import { onMounted, ref, watch } from 'vue'
import { MsgConfirmAsync, MsgError, MsgSuccess } from '@/utils/utils.ts'
import { useRouter } from 'vue-router'
const router = useRouter() // 路由

const props = withDefaults(
  defineProps<{
    type?: number
    subType: number | string
    keyword?: string
    pageNo?: number
    pageSize?: number
  }>(),
  {
    pageNo: 1,
    pageSize: 10,
  },
)

watch(props, (val) => {
  // console.log(keyword, subType, val)
  getAppTaskList()
})

// 应用调试
const onAppDebugger = async (appId: number, title: string) => {
  const resp = await reqPreApplicationRun(appId)
  if (resp.code === 0) {
    // MsgSuccess('环境创建成功')
    router.push({
      path: '/square/detail',
      query: {
        appId: appId,
        runId: resp.data.runId,
        applicationId: resp.data.applicationId,
        smartFlowId: resp.data.smartFlowId,
        title: title,
        handlerType: 'debugger',
      },
    })
  } else {
    // MsgError('环境创建失败')
  }
}

// 应用发布
const onAppPutSubmit = async (appId: number) => {
  let confirm = await MsgConfirmAsync('你确定提交上架审核吗？')
  if (confirm) {
    const resp = await reqAppPut(appId)
    resp.code === 0 && MsgSuccess('发布成功')
    resp.code !== 0 && MsgError('发布失败')
    getAppTaskList()
  }
}

// 删除
const onAppDel = async (appId: number) => {
  let confirm = await MsgConfirmAsync('你确定删除此应用吗？')
  if (confirm) {
    let resp = await reqDeleteApp(appId)
    resp.code === 0 && MsgSuccess('删除成功')
    resp.code !== 0 && MsgError('删除失败')
    getAppTaskList()
  }
}

// 运行
const onAppExecSubmit = async (appId: number) => {
  let confirm = await MsgConfirmAsync('你确定运行此应用吗？')
  if (confirm) {
    let resp = await reqApplicationRun(appId)
    resp.code === 0 && MsgSuccess('执行成功')
    resp.code !== 0 && MsgError(resp.msg || '执行失败')
    getAppTaskList()
  }
}

const appList = ref<respAppData[]>([])
onMounted(() => {
  getAppTaskList()
})

const $emit = defineEmits<{
  (e: 'update:pageNo', val: number)
  (e: 'update:total', val: number)
}>()

const getAppTaskList = async () => {
  const reqData: queryAppParams = {
    pageNo: props.pageNo,
    pageSize: props.pageSize,
    // userId: 0,
    type: props.type,
    title: props.keyword,
    subType: props.subType,
    // auditStatus: 0,
  }
  let resp = await reqgetAppTaskList(reqData)
  appList.value = resp.data.list
  $emit('update:total', resp.data.total)
}
</script>

<style scoped lang="scss">
.app-item {
  width: 278px;
  margin-right: 14px;
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid #ededed;
  border-radius: 4px;
  position: relative;

  &:nth-child(3n) {
    margin-right: 0;
  }
  .status-btn {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 1;
  }

  .img {
    width: 100%;
    height: 178px;
    background-color: #eee;
  }

  .text-wrap {
    padding: 10px 16px;
    margin-bottom: 39px;

    > .flex-yc {
    }

    h3 {
      font-size: 16px;
      color: #333;
      line-height: 20px;
    }

    span {
      display: inline-block;
      padding-right: 5px;
      font-size: 13px;
      color: #9ba1a8;
    }

    p {
      font-size: 12px;
      line-height: 14px;
      color: #8691a3;
    }
  }

  ul {
    padding: 10px 0;
    border-top: 1px solid #ededed;
    position: absolute;
    left: 0;
    bottom: 0;

    li {
      padding: 0 15px;
      font-size: 18px;
      color: #9ba1a8;

      & + li {
        border-left: 1px solid #ededed;
      }
    }
  }
}
</style>
